<template>
  <div class="container">
    <div class="w1300">
      <h1>高级生信分析</h1>
      <div class="list-box">
        <div class="list-item flex" v-for="i in 5" :key="i">
          <el-image class="img" fit="contain"></el-image>
          <div class="content-wrap flex-y">
            <h2>
              JASN：肾脏单细胞转录预测空间皮质骨精髓基因表达和组织渗透压梯度
            </h2>
            <p>
              其包括肾小管细胞群和生成促红细胞生成素（EPO）的肾细胞群，及其分离和培养方法，以及用所述细胞群治疗有所需要的受试者的方法
            </p>
            <div class="date-query-num flex-yc flex-xbt">
              <span>
                <b>文献重现</b>
                · 2023-02-30
              </span>
              <span class="flex-yc">
                <el-icon class="el-icon--left"><View /></el-icon>
                1500
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  overflow: hidden;
  background-color: #f7f8fa;

  .w1300 {
    padding: 0 28px;
    margin-top: 16px;
    margin-bottom: 50px;
    background-color: #fff;

    > h1 {
      padding-top: 25px;
      font-size: 16px;
      color: #333;
    }

    .list-box {
      .list-item {
        padding: 25px 0;

        & + .list-item {
          border-top: 1px solid #ededed;
        }

        .img {
          width: 232px;
          height: 161px;
          margin-right: 20px;
          background-color: #eee;
        }

        .content-wrap {
          h2 {
            margin-bottom: 14px;
            font-size: 24px;
            color: #021429;
          }

          p {
            height: 103px;
            font-size: 18px;
            color: #8691a3;
          }

          .date-query-num {
            span {
              font-size: 18px;
              color: #9ba1a8;

              b {
                color: $primary;
              }
            }
          }
        }
      }
    }
  }
}
</style>
